<!-- 执行详情 -->
<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="70%"
    destroy-on-close
  >
    <div
      class="form-box"
      style="max-height: 600px; overflow: hidden; overflow-y: auto"
    >
      <el-form
        label-position="right"
        label-width="100px"
        :model="checkDataForm"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="运行时长：">
              <el-input v-model="checkDataForm.handleTime" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开始时间：">
              <el-input v-model="checkDataForm.beginTime" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结束时间：">
              <el-input v-model="checkDataForm.endTime" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="数据源：">
              <el-select
                v-model="checkDataForm.dataSourceId"
                :disabled="true"
                style="width: 100%"
              >
                <el-option
                  v-for="item in dataBases"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="目标模型：">
              <el-select
                v-model="checkDataForm.targetModel"
                placeholder="请选择目标模型"
                style="width: 100%"
                @change="changeTargetModel"
              >
                <el-option
                  v-for="item in targetModelList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        v-loading="loading"
        :data="tableList"
        :cell-style="{ color: '#333333' }"
        :header-cell-style="{ background: '#F3F4F7', color: '#000000' }"
      >
        <el-table-column
          v-for="c in headerColumns"
          :key="c.key"
          align="center"
          :prop="c.key"
          min-width="100"
          show-overflow-tooltip
        >
          <template #header>
            <el-popover placement="top" trigger="hover">
              <span>{{ c.label || "暂无注释" }}</span>
              <span slot="reference">{{ c.key }}</span>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        small
        layout="total, prev, pager, next, sizes, jumper"
        :page-sizes="[5, 10, 20, 30]"
        :total="total"
        :hide-on-single-page="!total"
        :page-size.sync="searchParams.pageSize"
        :pager-count="7"
        :current-page.sync="searchParams.pageNum"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "executionDialog",
  data() {
    return {
      dialogTitle: "任务",
      dialogVisible: false,
      // 执行信息
      dataBases: [],
      checkDataForm: {
        handleTime: null,
        beginTime: null,
        endTime: null,
        myStatus: null,
        dataSourceId: null,
        targetModel: null,
        result: null,
      },
      targetModelList: [],
      headerColumns: [],
      tableList: [],
      loading: false,
      total: 0,
      searchParams: {
        pageNum: 1,
        pageSize: 5,
      },
    };
  },
  computed: {
    dialogForm() {
      if (this.tableName) {
        return this.executeInfoMap[this.tableName] || {};
      }
      return {};
    },
  },
  methods: {
    // 打开弹窗
    openDialog(info) {
      this.checkDataForm = Object.assign(this.checkDataForm, info);
      this.dialogTitle = info.taskName ? "任务：" + info.taskName : "任务";
      this.dialogVisible = true;
      this.getTaskInfo(info.taskId);
      this.getDataBaseInfo();
    },
    // 获取数据库信息
    getDataBaseInfo() {
      this.$axios
        .get(this.$api.dataConnection.physicalModel.getDataBases, {
          params: { targetType: "all" },
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.dataBases = res.data.data || [];
          } else {
            this.$message.warning(res.data.message);
          }
        });
    },
    // 获取配置信息
    getTaskInfo(id) {
      this.$axios
        .get(this.$api.dataConnection.dataAggregation.getTaskConfig, {
          params: {
            id,
          },
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.checkDataForm.dataSourceId = res.data.data.sourceDataId + "";
            this.targetModelList = res.data.data?.targetModelNames?.map(
              (item) => {
                return {
                  label: item.tableName,
                  value: item.id,
                };
              }
            );
            this.checkDataForm.targetModel =
              this.targetModelList?.[0]?.value || "";
            this.changeTargetModel();
          } else {
            this.$message.warning(res.data.message);
          }
        });
    },
    // 修改当前页码
    handleCurrentChange() {
      this.changeTargetModel();
    },
    // 修改每页条数
    handleSizeChange() {
      this.changeTargetModel();
    },
    // 切换目标模型
    changeTargetModel() {
      this.loading = true;
      this.$axios
        .get(this.$api.dataConnection.dataAggregation.getMonitorResultList, {
          params: {
            modelId: this.checkDataForm.targetModel,
            quartzInstanceId: this.checkDataForm.instanceId,
            ...this.searchParams,
          },
        })
        .then((res) => {
          if (res.data.code === 200) {
            let resource = res.data.data;
            if (Array.isArray(resource.headerNameList)) {
              this.transHeaders(
                resource.headerNameList,
                resource.commentNameList
              );
              if (Array.isArray(resource.valueList)) {
                this.transTableData(
                  resource.headerNameList,
                  resource.valueList
                );
                this.total = resource.total;
              } else {
                this.tableList = [];
                this.total = 0;
              }
            }
          } else {
            this.$message.warning(res.data.message);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 处理表头
    transHeaders(headers, names) {
      let arr = [];
      if (headers.length) {
        for (let i = 0; i < headers.length; i++) {
          arr.push({ key: headers[i], label: names[i] });
        }
      }
      this.headerColumns = arr;
    },
    // 处理数据
    transTableData(headers, data) {
      let arr = [];
      if (data.length) {
        for (let i = 0; i < data.length; i++) {
          let item = {};
          let dataItem = data[i];
          for (let k = 0; k < headers.length; k++) {
            item[headers[k]] = dataItem[k];
          }
          arr.push(item);
        }
      }
      this.tableList = arr;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-pagination {
  float: right;
  margin-top: 20px;

  .form-input /deep/ .el-input {
    width: 200px;
  }

  /deep/ .el-input__inner {
    height: 22px;
  }
}
</style>
